<template>
  <div class="z-upload flex">
    <div class="img-card img-hover cursor-pointer relative flex justify-center items-center"
         v-for="(url,index) in currentValue"
         :key="index">
      <img :src="url"
           alt="">

      <div class="absolute inset-0 img-card--action flex justify-center items-center">
        <i class="el-icon-zoom-in"
           @click.stop="handlePreview(url)"></i>
        <i class="el-icon-delete"
           @click.stop="handleDelete(url)"></i>
      </div>
    </div>

    <el-upload action=""
               v-if="limit >= currentValue.length"
               :http-request="handleUpload"
               class="z-upload"
               :show-file-list="false">
      <div v-loading="loading"
           class="img-card upload-card flex justify-center items-center">
        <i class="el-icon-plus"></i>
      </div>
    </el-upload>

    <el-dialog :visible.sync="visible"
               append-to-body>
      <img width="100%"
           :src="url"
           alt="">
    </el-dialog>
  </div>
</template>

<script>
import useBlob from '@/components/storybook/hooks/useBlob'
export default {
  name: 'ZUpload',
  props: {
    value: {
      type: String,
      default: ''
    },
    limit: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      url: undefined,
      loading: false
    }
  },
  computed: {
    currentValue: {
      get () {
        return this.value ? this.value.split(',') : []
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    visible: {
      get () {
        return !!this.url
      },
      set (val) {
        if (!val) {
          this.url = undefined
        }
      }
    }
  },
  methods: {
    handleDelete (url) {
      const index = this.currentValue.indexOf(url)
      this.currentValue = this.currentValue.filter((i, m) => m !== index
      ).join()
      this.$emit('delete', url, this.currentValue)
    },

    handlePreview (url) {
      this.url = url
      this.$emit('preview', url, this.currentValue)
    },
    async handleUpload (data) {
      try {
        this.loading = true
        const { get } = this._
        const file = await useBlob(data.file)

        const paramsUpload = {
          file,
          path: 'apps',
          bucket: 'bots'
        }
        const { postUploadImg } = this.$interface.system
        const { data: response } = await postUploadImg(paramsUpload)
        if (response.code !== 0) {
          throw get(response, 'msg', '')
        }
        this.currentValue = [...this.currentValue, get(response, 'data.src')].join()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.img-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  width: 70px;
  height: 70px;
  margin-right: 10px;
  transition: all 200ms;
  &--action {
    opacity: 0;
    transition: all 200ms;
    & > i {
      font-size: 13px;
    }
  }
  &.img-hover {
    border: 1px solid #c0ccda;
    &:hover {
      color: #fff;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      .img-card--action {
        opacity: 1;
      }
      img {
        opacity: 0.4;
      }
    }
  }
  img {
    width: 70%;
    height: 70%;
  }
}
</style>
